<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>深入掌握CSS组件</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">媒体板式</h3>
<div class="media">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592566641529&di=fc0eee864360c35cfc1d5223f2be2b34&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F20%2F2018062093324_nY2TE.jpeg" alt="" class="mr-4 w-25">
    <div class="media-body">
        <h3 class="mt-0">肖申克的救赎</h3>
        <div class="my-1">类型：电影作品</div>
        <div class="my-1">导演：弗兰克•达拉邦特</div>
        <div class="my-1">主演：蒂姆•罗宾斯，摩根•弗里曼等</div>
        <div class="my-1">片长：142分钟</div>
        <div class="my-1">
            <a href="#">角色介绍、</a>
            <a href="#">音乐原声、</a>
            <a href="#">幕后花絮、</a>
            <a href="#">更多>></a>
        </div>
        <div class="my-1">
            简介：该片改编自斯蒂芬•金《四季奇谭》中收录的同名小说，该片中涵盖全片的主题是“希望”，全片透过监狱这一强制剥夺自由，高度强调纪律的特殊背景来展现
            作为个体的人对“时间流逝，环境改造”的恐惧...
        </div>
    </div>
</div>


<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>